<template>
  <div class="audit">
    <div class="celbox">
      <div class="c_1">
        <div class="c_tit">提交时间：</div>
        <!-- <el-date-picker
          v-model="value"
          type="datetime"
          placeholder="请选择时间"
          format="YYYY-MM-DD"
        /> -->
        <el-date-picker
          v-model="value"
          type="daterange"
          range-separator="To"
          :clearable="false"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </div>
      <div class="c_1">
        <div class="c_tit">提交人:</div>
        <el-input
          v-model="names.keyword"
          class="w-50 m-2"
          size="large"
          placeholder="请输入提交人"
        />
      </div>
    </div>
    <div class="celbox celbox2">
      <div class="c_1 c_2">
        <div class="c_tit">操作：</div>
        <el-select v-model="names.status" clearable placeholder="请选择">
          <el-option label="已发布" value="1" />
          <el-option label="未发布" value="0" />
        </el-select>
      </div>
      <div class="btn" style="cursor: pointer" @click="chax">
        <el-icon><Search /></el-icon>
        查询
      </div>
      <div class="btn btn2" style="cursor: pointer" @click="congz">
        <el-icon><RefreshRight /></el-icon>
        重置
      </div>
    </div>
    <div class="br"></div>
    <div class="table">
      <el-table :data="data" v-if="total > 0">
        <el-table-column label="序号" align="center"
          ><template #default="scope">
            {{ (names.page - 1) * names.page_size + scope.$index + 1 }}
          </template></el-table-column
        >
        <el-table-column prop="nickname" label="提交人" />
        <el-table-column prop="create_time" label="提交时间" width="200px" />
        <el-table-column label="空间动态">
          <template #default="scope">
            <el-button
              link
              type="danger"
              key="danger"
              style="cursor: pointer"
              @click="ck(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="发布状态">
          <template #default="scope">
            <div v-if="scope.row.status == 1">已发布</div>
            <div v-else>未发布</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-popconfirm
              title="是否撤回?"
              @confirm="ch(scope.row.id)"
              v-if="scope.row.status == 1"
            >
              <template #reference>
                <el-button link type="danger" key="danger">撤回</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm title="是否发布?" @confirm="fb(scope.row.id)" v-else>
              <template #reference>
                <el-button link type="success" key="success">发布</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="rq" v-else>
        <img src="@/image/容器.svg" alt="" />
        <div>暂无信息</div>
      </div>
    </div>
    <div class="con_bom" v-if="total > 0">
      <div class="cc">共{{ total }}条</div>
      <el-pagination
        v-model:current-page="names.page"
        v-model:page-size="pageSize"
        background
        layout="prev, pager, next"
        :total="total"
        @next-click="nextclick"
        @prev-click="prevclick"
        @change="change1"
      />
    </div>
    <div class="mask" v-if="msk">
      <div class="content">
        <div class="con_title">
          <div class="e_lef">{{ data1.nickname }}</div>
          <!-- <div >
          </div> -->
          <img
            class="e_rig"
            style="cursor: pointer"
            @click="msk = false"
            src="@/image/xxx.png"
            alt=""
          />
        </div>
        <div class="com">
          {{ data1.content }}
        </div>
        <div class="img">
          <img :src="e" alt="" v-for="(e, i) in data1.images" :key="i" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getreviewApi, gereviewdoApi, gerlistsApi } from '@/api/user'
import moment from 'moment'
const value = ref('')
const msk = ref(false)
const names = ref({
  start_time: '',
  end_time: '',
  keyword: '',
  status: '',
  page: 1,
  page_size: 12
})
const total = ref(0)
const data = ref()
const getreview = () => {
  getreviewApi(names.value).then(res => {
    console.log(res)
    data.value = res.data.data.data
    total.value = res.data.data.total
  })
}
getreview()
const list = ref({
  id: '',
  status: 1
})
const ch = (id: any) => {
  // console.log(list1)
  list.value.id = id
  list.value.status = 0
  gereviewdoApi(list.value).then(res => {
    // console.log(res)
    getreview()
  })
}
const fb = (id: any) => {
  list.value.id = id
  list.value.status = 1
  gereviewdoApi(list.value).then(res => {
    // console.log(res)
    getreview()
  })
}
const chax = () => {
  let aa = value.value[0]
  let bb = value.value[1]
  if (value.value != '') {
    // names.value.start_time = moment(value.value).format('YYYY-MM-DD')
    names.value.start_time = moment(aa).format('YYYY-MM-DD')
    names.value.end_time = moment(bb).format('YYYY-MM-DD')
  } else {
    names.value.start_time = ''
    names.value.end_time = ''
  }
  console.log(names.value)
  getreview()
}
const congz = () => {
  names.value = {
    start_time: '',
    end_time: '',
    keyword: '',
    status: '',
    page: 1,
    page_size: 12
  }
  value.value = ''
  getreview()
}
const data1 = ref()
const ck = (id: any) => {
  console.log(id, 'id')
  msk.value = true
  // gerlistsApi(id).then(res => {
  //   console.log(res, '查看')
  // data1.value = res.data.data.data
  // })
  data1.value = id
}
const pageSize = ref(12)
const nextclick = () => {
  names.value.page++
  getreview()
}
const prevclick = () => {
  names.value.page--
  getreview()
}
const change1 = (e: any) => {
  console.log(e)
  names.value.page = e
  getreview()
}
</script>

<style lang="scss" scoped>
.e_rig {
  width: 16px;
  height: 16px;
}
.rq {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
  img {
    width: 228px;
    height: 226px;
  }
}
.kong {
  height: 55vw;
  margin-top: -18px;
  margin-left: -16px;
  width: 800px;
  background: #fff;
}
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  .content::-webkit-scrollbar {
    display: none;
  }
  .content {
    width: 608px;
    overflow: auto;
    height: 400px;
    margin: 100px auto;
    padding-top: 32px;
    padding-bottom: 32px;
    background-color: #fff;
    .img {
      padding: 0 40px;
      img {
        width: 250px;
        margin-top: 31px;
        margin-right: 28px;
        height: 210px;
        border-radius: 8px;
        background: rgba(224, 32, 32, 0.1);
      }
      :nth-child(2n) {
        margin-right: 0;
      }
    }
    .con_title {
      padding: 0 40px;
      display: flex;
      justify-content: space-between;
      font-size: 18px;
      font-weight: 600;
      color: #1a1a1a;
    }
    .com {
      padding: 0 40px;
      font-size: 16px;
      font-weight: normal;
      line-height: 24px;
      margin-top: 30px;
      color: #1a1a1a;
    }
  }
}
::v-deep .el-date-editor.el-input {
  margin-left: -25px;
  width: 199px;
  margin-right: 25px;
}
::v-deep .el-table__cell {
  height: 54px;
  text-align: center;
}
::v-deep .el-select__wrapper {
  width: 220px;
  height: 32px;
  border-radius: 3px;
  background: #ffffff;
  box-sizing: border-box;
  border: 1px solid #dcdcdc;
}
::v-deep .el-input__wrapper {
  width: 220px;
  height: 32px;
  border-radius: 3px;
  background: #ffffff;
  box-sizing: border-box;
  border: 1px solid #dcdcdc;
}
.audit {
  position: relative;
  height: 1200px;
  margin-top: -18px;
  margin-left: -16px;
  width: 800px;
  background-color: #fff;
  padding: 28px 0;
  .con_bom {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    .cc {
      width: 60px;
      margin-top: 8px;
    }
  }
  .table {
    padding: 0 16px;
    margin-top: 45px;
  }
  .celbox {
    padding-left: 32px;
    display: flex;
    .c_1 {
      display: flex;
      .c_tit {
        margin-top: 3px;
        width: 100px;
        font-size: 14px;
        color: #000000;
      }
    }
  }
  .celbox2 {
    margin-top: 32px;
    .btn {
      width: 76px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      font-size: 14px;
      border-radius: 3px;
      color: #ffffff;
      background: #e02020;
    }
    .btn2 {
      background: #ffffff;
      box-sizing: border-box;
      /* 党建主色 */
      border: 1px solid #e02020;
      color: #e02020;
      margin-left: 28px;
    }
  }
  .br {
    margin-top: 32px;
    width: 764px;
    margin-left: 16px;
    border-bottom: 1px solid #e5e5e5;
  }
}
::v-deep .el-range-editor.el-input__wrapper {
  margin-left: -25px;
  margin-right: 25px;
}
</style>
